﻿@using PersonBlog.Model;
@using PersonBlog.Extend;

@{
    ViewBag.Title = "Index";
    Layout = "~/Views/Shared/_Layout.cshtml";
    WeatherInfoEntity WeatherInfo = ViewBag.CurrCity == null ? null : ViewBag.CurrCity;
    string CityName = ViewBag.CityName == null ? null : ViewBag.CityName;
    List<AirIndexEntity> AirIndexList = ViewBag.AirIndexList == null ? null : ViewBag.AirIndexList;
    string xAxis= ViewBag.xAxis == null ? null : ViewBag.xAxis;
    string yAxis = ViewBag.yAxis == null ? null : ViewBag.yAxis;
}
@*<link rel="stylesheet" href="~/css/test2.css" />*@
<link rel="stylesheet" href="~/css/weather.css" />
<script src="Scripts/jquery-1.10.2.js"></script>
<script src="~/Scripts/highcharts.js"></script>
<style>
    .ulList li { list-style:none; width:30%; float:left; height:100px; border:1px solid #8ac4f6;margin:5px; padding:5px; font-size:14px; font-family:微软雅黑; }
    .ulList li span { font-size:18px; color:#8ac4f6; font-weight:bold; }
    .fa-pull-left { color:#8ac4f6 }
</style>


<div class="all">
    <div class="header">
        <p><label class="diqu"><i class="fa-map-marker fa"></i>@WeatherInfo.CityName</label></p>
        <p><label class="btn">[其他城市]</label></p>
    </div>
    <div class="content">
        <div class="textTitle">

        </div>
        <div class="text1">
            <div class="riqi" id="one">@WeatherInfo.Weather.Split(' ')[0] @Convert.ToDateTime(WeatherInfo.WeatherDateTime).ToCNWeek()</div>
            <div class="tqImg"><img id="img1" src="~/images/weather/a_@WeatherInfo.PicOne" /></div>
            <div class="xinxi">
                <label><span id="low1">@WeatherInfo.Temperature.Split('/')[0]</span><span class="dao">～</span><span id="high1">@WeatherInfo.Temperature.Split('/')[1]</span></label>
            </div>
            <div class="xix1" id="type1">@WeatherInfo.Weather.Split(' ')[1]</div>
            <div class="xix1" id="lixiang1">@WeatherInfo.WindDir</div>
            <div class="xix1" id="aqi">空气质量等级 @AirIndexList[AirIndexList.Count-1].AirLevel</div>
        </div>
        <div class="text2">
            <div class="riqi" id="one">@WeatherInfo.AfterWeather.Split(' ')[0] @Convert.ToDateTime(WeatherInfo.WeatherDateTime).AddDays(1).ToCNWeek()</div>
            <div class="tqImg2"><img id="img2" src="~/images/weather/a_@WeatherInfo.AfterPicOne" alt="" /></div>
            <div class="xinxi2">
                <label><span id="low2">@WeatherInfo.AfterTem.Split('/')[0]</span><span class="dao">～</span><span id="high2">@WeatherInfo.AfterTem.Split('/')[1]</span></label>
            </div>
            <div class="xix2" id="type2">@WeatherInfo.AfterWeather.Split(' ')[1]</div>
            <div class="xix2" id="lixiang2">@WeatherInfo.AfterWindDir</div>
        </div>
        <div class="text2">
            <div class="riqi" id="two">@WeatherInfo.DatWeather.Split(' ')[0] @Convert.ToDateTime(WeatherInfo.WeatherDateTime).AddDays(2).ToCNWeek()</div>
            <div class="tqImg2"><img id="img3" src="~/images/weather/a_@WeatherInfo.DatPicOne" alt="" /></div>
            <div class="xinxi2">
                <label><span id="low3">@WeatherInfo.DatTem.Split('/')[0]</span><span class="dao">～</span><span id="high3">@WeatherInfo.DatTem.Split('/')[1]</span></label>
            </div>
            <div class="xix2" id="type3">@WeatherInfo.DatWeather.Split(' ')[1]</div>
            <div class="xix2" id="lixiang3">@WeatherInfo.DatWindDir</div>
        </div>
        <label class="tishiyu">&nbsp;&nbsp;<span id="tishi">@WeatherInfo.DayLive</span></label>
        <div class="qushitu" id="container" style="width:90%;height:300px; margin:0 auto;"></div>
        <div class="panel panel-info">
            <div class="panel-heading">
                <h3 class="panel-title">今日生活指数</h3></div>
            <div class="panel-body">
                <ul class="ulList">
                    <li><i class="fa fa-umbrella fa-5x fa-pull-left"></i><span>紫外线指数</span><br />@WeatherInfo.Other.Split('。')[0].Split('：')[1]</li>
                    <li><i class="fa fa-plus-square fa-5x fa-pull-left"></i><span>感冒指数</span><br />@WeatherInfo.Other.Split('。')[1].Split('：')[1]</li>
                    <li><i class="fa fa-child fa-5x fa-pull-left"></i><span>穿衣指数</span><br />@WeatherInfo.Other.Split('。')[2].Split('：')[1]</li>
                    <li><i class="fa fa-car fa-5x fa-pull-left"></i><span>洗车指数</span><br />@WeatherInfo.Other.Split('。')[3].Split('：')[1]</li>
                    <li><i class="fa fa-futbol-o fa-5x fa-pull-left"></i><span>运动指数</span><br />@WeatherInfo.Other.Split('。')[4].Split('：')[1]</li>
                    <li><i class="fa fa-skyatlas fa-5x fa-pull-left"></i><span>空气污染指数</span><br />@WeatherInfo.Other.Split('。')[5].Split('：')[1]</li>
                </ul>
            </div>
        </div>
    </div>
    <!--弹出层（选择城市）-->
    <div class="cityBox">
        @Html.Partial("_CityList")
    </div>
    <input type="hidden" id="xAxis" value="@xAxis"
    " />
    <input type="hidden"id="yAxis" value="@yAxis" />

</div>

<script>
    Highcharts.setOptions({
        lang: {
            contextButtonTitle: "图表导出菜单",
            decimalPoint: ".",
            downloadJPEG: "下载JPEG图片",
            downloadPDF: "下载PDF文件",
            downloadPNG: "下载PNG文件",
            downloadSVG: "下载SVG文件",
            loading: "加载中",
            noData: "没有数据",
            printChart: "打印图表",

        }
    });

    $(document).ready(function () {
        var x = eval($("#xAxis").val());
        var y = eval($("#yAxis").val());
        loadChart("空气质量趋势图", "空气质量指数", "", x, y);
    });

    function loadChart(title, yName, unit, xValues, yValues) {

        $('#container').highcharts({
            title: {
                text: title,
                x: 0 //center
            },
            credits:
                {
                    enabled: false
                },
            xAxis: {
                categories: xValues,
                labels: {
                    rotation: 0,
                    staggerLines: 2
                }
            },
            yAxis: {
                title: {
                    text: yName
                },
                plotLines: [{
                    value: 0,
                    width: 1,
                    color: '#808080'
                }]
            },
            tooltip: {
                valueSuffix: unit
            },
            series: [{
                name: yName,
                data: yValues
            }]
        });
    }


    function cityBtn(obj) {
        closeFun();
        $("#CityName").val(obj);
        window.location.href = '@Url.Action("Index","Weather")' +"?CityName="+obj;
    }
    function closeFun() {
        $("#province").html("");
        $("#city").html("");
        $(".cityBox").hide();
    }

    $(function () {
        $(".btn").click(function () {
            var p = $(".header").find("p").eq(1);
            var top = p[0].offsetHeight;
            var left = p[0].offsetWidth;
            $(".cityBox").css({ "top": top + 10, "left": left + 30 });
            $(".cityBox").show();
        });
    });
</script>





